<!DOCTYPE html>
<html>
    <head>
      <title>iPhone.Zepto</title>
      <link href="iphone.css" media="screen" rel="stylesheet" type="text/css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="format-detection" content="telephone=no" />
    </head>
    <body>
      <section id="menu">
        <div class="toolbar">
          <h1>Title</h1>
        </div>
        <ul class="menu">
          <li class="arrow"><a href="#menu_1">Menu 1</a></li>
          <li>Menu 1</li>
          <li>Menu 1</li>
          <li>Menu 1</li>
          <li>Menu 1</li>
        </ul>
      </section>
      <section id="menu_1">
        <div class="toolbar">
          <h1>Menu 1</h1>
        </div>
        <ul class="menu">
          <li>SubMenu 1</li>
          <li>SubMenu 2</li>
        </ul>
      </section>
      <script src="../../src/zepto.js"></script>
      <script src="../../src/event.js"></script>
      <script src="../../src/touch.js"></script>
      <script>
        $(document).ready(function(){
          var activate = ('createTouch' in document) ? 'touchstart' : 'click'

          $("body > section").first().addClass("current")

          $("a.back").live(activate, function(event) {
            var current = $(this).attr("href")
            $(".current").removeClass("current").addClass("reverse")
            $(current).addClass("current")
          })

          $(".menu a[href]").live(activate, function(event) {
            var link = $(this), section = link.closest('section'),
              prev_element = "#"+(section.removeClass("current").addClass("reverse").attr("id"))
            $(link.attr("href")).addClass("current")
            $(".current .back").remove()
            $(".current .toolbar").prepend("<a href=\""+prev_element+"\" class=\"back\">Back</a>")
          })
        })
      </script>
    </body>
</html>
